<template>
  <div clas="border-none relative zg_activity_data">
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" align="middle">
          <el-col :span="8">
            <el-input
              class="input_style"
              v-model="queryParams.title"
              clearable
              placeholder="请输入标题关键字"
              @keyup.enter.native="getLists"
            />
          </el-col>
          <el-col :span="3">
            <el-select
              class="input_style"
              v-model="queryParams.industry"
              clearable
              placeholder="请选择行业"
              @change="getLists"
            >
              <el-option
                v-for="(item, index) in dictData.industry"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              class="input_style"
              v-model="queryParams.status"
              clearable
              placeholder="请选择状态"
              @change="getLists"
            >
              <el-option
                v-for="(item, index) in dictData.activity_status"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-button
              @click="getLists"
              color="#63ccba"
              type="primary"
              class="btn_style mr_10"
            >
              <template #icon>
                <icon name="el-icon-Search" />
              </template>
              搜索
            </el-button>
            <el-button @click="resetParams" plain class="mr_10">
              <template #icon>
                <icon name="el-icon-Refresh" />
              </template>
              重置
            </el-button>
            <el-checkbox
              v-model="choseAllCheck"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              label="全选"
              border
              fill="#ff0000"
              class="mr_10"
            />
            <el-dropdown @command="handCommandHeader">
              <el-button
                v-show="choseAllCheck || isIndeterminate"
                class="btn_style mr_10"
                color="#63ccba"
                >选择状态</el-button
              >
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(
                      dictDataItem, dictDataIndex
                    ) in dictData.activity_status"
                    :key="dictDataIndex"
                    :value="dictDataItem.value"
                    :disabled="dictDataItem.value == queryParams.status"
                    :command="{ row: dictDataItem }"
                    >{{ dictDataItem.name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button
              @click="deleteDia(false)"
              type="danger"
              class="btn_style mr_10"
              v-show="choseAllCheck || isIndeterminate"
              >批量删除</el-button
            >
            <el-button
              type="primary"
              class="btn_style"
              v-show="choseAllCheck || isIndeterminate"
              @click="bulkOperation"
              >选择归属人</el-button
            >
          </el-col>
          <!-- <el-col :span="2" class="flex justify-end">
            <move-button></move-button>
          </el-col> -->
        </el-row>
      </template>
      <div class="listsContainer pb_32" v-loading="pager.loading">
        <el-row :gutter="10" align="middle">
          <el-col
            :span="6"
            v-for="item in pager.lists"
            :key="item.id"
            class="each-col"
          >
            <!-- :class="item.bgColor" -->
            <el-card
              class="cardBD"
              shadow="hover"
              :class="{
                end: item.color == 2,
                lastDay: item.color == 4,
                threeDay: item.color == 3,
                now: item.color == 1,
              }"
            >
              <!-- 最后一天       红色  
                   三天以内       橙色   
                   已经结束       灰色
                   进行中         蓝色 -->
              <div class="btn_top mt_10 bg_white cursor_p p_5">
                <div clas="left" style="display: flex; align-items: center">
                  <el-checkbox
                    v-model="item.isCheck"
                    size="large"
                    class="mr_10"
                    @change="handleCheckedOnceChange(item)"
                  />
                  <el-dropdown @command="handCommand">
                    <el-button
                      size="small"
                      type="success"
                      plain
                      :icon="StatusIcon[item.status]"
                      :color="btnColor[item.status]"
                      v-if="item.status == 3"
                      class="btnChange"
                    >
                      <dict-value
                        :options="dictData.activity_status"
                        :value="item.status"
                      />
                    </el-button>
                    <el-button
                      size="small"
                      type="warning"
                      plain
                      :icon="StatusIcon[item.status]"
                      :color="btnColor[item.status]"
                      v-else-if="item.status == 6"
                      class="btnChange"
                    >
                      <dict-value
                        :options="dictData.activity_status"
                        :value="item.status"
                      />
                    </el-button>
                    <el-button
                      size="small"
                      type="danger"
                      class="btnChange"
                      plain
                      :icon="StatusIcon[item.status]"
                      :color="btnColor[item.status]"
                      v-else-if="item.status == 4 || item.status == 5"
                    >
                      <dict-value
                        :options="dictData.activity_status"
                        :value="item.status"
                      />
                    </el-button>
                    <el-button
                      size="small"
                      type="info"
                      class="btnChange"
                      plain
                      :icon="StatusIcon[item.status]"
                      :color="btnColor[item.status]"
                      v-else-if="
                        item.status == 0 || item.status == 1 || item.status == 2
                      "
                    >
                      <dict-value
                        :options="dictData.activity_status"
                        :value="item.status"
                      />
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          v-for="(
                            dictDataItem, dictDataIndex
                          ) in dictData.activity_status"
                          :key="dictDataIndex"
                          :value="dictDataItem.value"
                          :disabled="dictDataItem.value == item.status"
                          :command="{
                            row: {
                              dictDataItem: dictDataItem,
                              id: item.id,
                            },
                          }"
                        >
                          <dict-value
                            :options="dictData.activity_status"
                            :value="dictDataItem.value"
                          />
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <div
                  class="rigt"
                  style="display: flex; align-items: center; font-size: 0.7rem"
                >
                  <!-- <el-button size="small" type="primary"
                    @click="BelongingPersonVisible = true">设置归属人</el-button>-->
                  数据大屏：
                  <el-switch
                    v-model="item.is_sjdp"
                    :active-value="1"
                    :inactive-value="0"
                    size="small"
                    class="mr-5"
                    @change="workBenchShow(item)"
                  />
                  <el-dropdown trigger="click">
                    <el-button
                      link
                      class="blodWorld"
                      icon="MoreFilled"
                    ></el-button>
                    <template #dropdown>
                      <el-row class="fz_12 w_150 text_center" align="middle">
                        <el-col :span="12" class="mt_10">
                          <router-link
                            :to="{
                              path: getRoutePath('activity.zg_gift_log/lists'),
                              query: {
                                id: item.id,
                                title: item.title,
                              },
                            }"
                          >
                            <el-link
                              type="primary"
                              :underline="false"
                              class="fz_16"
                              >助力日志</el-link
                            >
                          </router-link>
                        </el-col>
                        <el-col :span="12" class="mt_10">
                          <router-link
                            :to="{
                              path: getRoutePath(
                                'activity.zg_votes_log_alone/lists'
                              ),
                              query: {
                                id: item.id,
                                title: item.title,
                              },
                            }"
                          >
                            <el-link
                              type="primary"
                              :underline="false"
                              class="fz_16"
                              >活动日志</el-link
                            >
                          </router-link>
                        </el-col>
                        <el-col :span="12" class="mt_10">
                          <router-link
                            :to="{
                              path: getRoutePath(
                                'activity.zg_assist_list/lists'
                              ),
                              query: {
                                id: item.id,
                                title: item.title,
                              },
                            }"
                          >
                            <el-link
                              type="primary"
                              :underline="false"
                              class="fz_16"
                              >礼物设置</el-link
                            >
                          </router-link>
                        </el-col>
                        <el-col :span="12" class="mt_10">
                          <el-link
                            @click="openBelongingPersonVisible('look', item.id)"
                            type="primary"
                            :underline="false"
                            class="fz_16"
                            >查看归属</el-link
                          >
                        </el-col>
                        <el-col :span="12" class="mt_10 text_center">
                          <el-link
                            type="primary"
                            @click="updateLink(item.id)"
                            class="fz_16 mb-2"
                            :underline="false"
                            >设置新链接</el-link
                          >
                        </el-col>
                        <el-col :span="12" class="mt_10 text_center">
                          <el-link
                            type="danger"
                            @click="deleteDia(item.id)"
                            class="fz_16 mb-2"
                            >删除</el-link
                          >
                        </el-col>
                      </el-row>
                    </template>
                  </el-dropdown>
                </div>
              </div>
              <div class="bottom_container" @click="leavePlayer(item)">
                <div class="title mt_10 bg_white cursor_p p_5">
                  <div class="title_info">
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="item.title"
                      placement="top"
                    >
                      <span class="font600">{{ item.title }}</span>
                    </el-tooltip>
                  </div>
                  <div class="title_info_copy">
                    <el-link type="success" @click.stop="cpoyLink(item.link)"
                      >复制链接</el-link
                    >
                  </div>
                </div>
                <div class="time mt_10 bg_white cursor_p p_5">
                  <p class="start_time">
                    开始时间：
                    {{ item.start_time }}
                  </p>
                  <p class="end_time">
                    结束时间：
                    {{ item.end_time }}
                  </p>
                </div>
                <div
                  class="member_info mt_10 bg_white cursor_p p_5 flex flexbtween"
                >
                  <div class="member_name">
                    <p class="fz_16">活动创建：</p>
                    <p class="fz_16">{{ item.account }}</p>
                  </div>
                  <div class="remark">
                    <p class="fz_16">备注：</p>
                    <p class="red fz_16">{{ item.remark }}</p>
                  </div>
                </div>
                <div class="data_content mt_10 bg_white cursor_p p_5">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <p class="fz_16">
                        热度：
                        <span class="red">{{ item.hot_num }}</span>
                      </p>
                    </el-col>
                    <el-col :span="12">
                      <p class="fz_16 font_600">
                        助力：
                        <span class="red">{{ item.zhuli_num }}</span>
                      </p>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="position pt_10 pb_10">
        <el-pagination
          :page-size="pager.size"
          :currentPage="pager.page"
          :page-sizes="[8, 16, 32, 48]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 分配归属人 -->
    <el-dialog
      v-model="BelongingPersonVisible"
      :title="BelongingPersonTitle"
      width="400"
      @close="BelongingPersonVisible = false"
    >
      <el-form
        :model="BelongingPersonForm"
        label-width="120px"
        style="max-width: 600px"
      >
        <el-form-item
          label="活动归属人"
          v-if="BelongingPersonTitle.includes('修改')"
        >
          <el-autocomplete
            v-model="BelongingPersonForm.name"
            :fetch-suggestions="querySearch"
            clearable
            class="input_style"
            placeholder="请输入活动归属人"
            @select="handleSelect"
          />
        </el-form-item>
        <el-form-item label="活动归属人：" v-else>
          <span
            class="mr_10"
            v-for="(lookItem, lookIndex) in BelongingPersonForm.name"
            :key="lookIndex"
            >{{ lookItem }}</span
          >
        </el-form-item>
      </el-form>
      <template #footer v-if="BelongingPersonTitle.includes('修改')">
        <div class="dialog-footer">
          <el-button @click="BelongingPersonVisible = false" class="mr_10"
            >取消分配</el-button
          >
          <el-button type="primary" @click="BelongingPersonSubmit"
            >确认分配</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 批量分配归属人 -->
    <el-dialog
      v-model="BelongingPersonVisibleMore"
      title="分配归属人"
      width="800"
      @close="BelongingPersonVisibleMore = false"
    >
      <el-table
        :data="BelongingPersonTableChose"
        border
        stripe
        @selection-change="handleSelectionChange"
        v-loading="tableloading"
        max-height="480"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column property="id" label="id" align="center" />
        <el-table-column property="account" label="昵称" align="center" />
        <el-table-column property="role_name" label="角色" align="center" />
        <el-table-column property="mobile" label="电话" align="center" />
        <el-table-column property="remark" label="备注" align="center" />
        <!-- <el-table-column property="address" label="操作"align="center">
            <template #default="{row}">
              <el-button type="primary">查询</el-button>
            </template>
          </el-table-column>-->
      </el-table>
      <el-pagination
        class="mt_10"
        :currentPage="BelongingPersonCurrentPage"
        :page-size="BelongingPersonPageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="BelongingPersonTotal"
        @size-change="BelongingPersonHandleSizeChange"
        @current-change="BelongingPersonHandleCurrentChange"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="BelongingPersonVisibleMore = false" class="mr_10"
            >取消</el-button
          >
          <el-button type="primary" @click="BelongingPersonMoreSubmit"
            >确认分配</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 高级设置 -->
    <el-dialog
      v-model="advancedSettingVisible"
      title="高级设置"
      width="400"
      @close="advancedSettingVisible = false"
    >
      <el-form :model="advancedSettingForm" label-width="120px">
        <el-form-item label="报名">
          <el-switch
            v-model="advancedSettingForm.is_join"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="高级">
          <el-switch
            v-model="advancedSettingForm.is_gaoji"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="快速通道">
          <el-switch
            v-model="advancedSettingForm.is_kstd"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="关闭限流">
          <el-switch
            v-model="advancedSettingForm.is_gbxl"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="禁用老链接">
          <el-switch
            v-model="advancedSettingForm.is_jyllj"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="分配用户">
          <el-switch
            v-model="advancedSettingForm.is_fpyh"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="开启助力">
          <el-switch
            v-model="advancedSettingForm.is_kqzl"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="助力数量">
          <el-switch
            v-model="advancedSettingForm.is_zlsl"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="助力日志">
          <el-switch
            v-model="advancedSettingForm.is_zlrz"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="助力日志条数">
          <el-input-number
            v-model="advancedSettingForm.zlrz_num"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="开启助力">
          <el-switch
            v-model="advancedSettingForm.is_open"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="人气比例">
          <el-input
            v-model="advancedSettingForm.popularity_ratio"
            placeholder="请输入人气比例"
            type="number"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="advancedSettingVisible = false" class="mr_10"
            >取 消</el-button
          >
          <el-button type="primary" @click="advancedSettingSubmit"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog
      v-model="deleteVisible"
      title="是否确认删除"
      width="400"
      @close="deleteVisible = false"
    >
      <el-icon color="#e6a23c" size="16">
        <WarningFilled />
      </el-icon>
      <span class="fz_12"
        >已选中id为&nbsp;&nbsp;{{ deleteId }}&nbsp;&nbsp;的活动</span
      >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteSubmitCancel" class="mr_10">取 消</el-button>
          <el-button type="primary" @click="deleteSubmit">确定删除</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 复制活动 -->
    <!-- <el-dialog v-model="copyVisible" title="复制活动" width="400" @close="copyVisible = false">
        <el-form :model="copyFrom" label-width="120px">
          <el-form-item label="活动标题">
            <el-input v-model="copyFrom.title" class="input_style" placeholder="请输入复制活动标题" clearable />
          </el-form-item>
          <el-form-item label="是否复制票数">
            <el-checkbox v-model="copyFrom.is_copy_player" :true-label="1" :false-label="0" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="copyVisible = false" class="mr_10">取 消</el-button>
            <el-button type="primary" @click="submitCopy">确 定</el-button>
          </div>
        </template>
      </el-dialog>-->
    <QR-code-url
      :QrCodeVisible="QrCodeVisible"
      :QrCodeUrl="QrCodeUrl"
      @close="QrCodeVisible = false"
    ></QR-code-url>
  </div>
</template>

<script lang="ts" setup name="zgActivityLists">
import {
  ref,
  reactive,
  watch,
  onMounted,
  defineOptions,
  onActivated,
  onDeactivated,
} from "vue";
import { ActiveUsePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import useClipboard from "vue-clipboard3";
import {
  apiZgActivityLists,
  apiZgActivityUpdateStatus,
  BelongingPersonLookparams,
  ViewAdvancedSettings,
  ViewAdvancedUpdate,
  ViewAdvancedSettingsALL,
  apiZgActivityDelete,
  copyActivityLink,
  set_sjdp,
  set_new,
} from "@/api/zg_activity";
import { adminList } from "@/api/perms/admin";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import { ElMessage } from "element-plus";
import { getRoutePath } from "@/router";
import QRCodeUrl from "@/components/QRCodeUrl/index.vue";
import useAppStore from "@/stores/modules/app";
const appStore = useAppStore();
const route = useRoute();
const router = useRouter();
defineOptions({
  name: "zg_activity",
});
const leavePlayer = (item: any) => {
  router.push({
    path: getRoutePath("activity.zg_player_list/lists"),
    query: {
      id: item.id,
      title: item.title,
    },
  });
};

// 是否在数据大屏显示
const workBenchShow = async (value: Object) => {
  const res = await set_sjdp({
    is_sjdp: value.is_sjdp,
    id: value.id,
  });
};

const AllocatioDia = ref(false);
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);

// 查询条件
const queryParams = reactive({
  title: "",
  status: "3",
  industry: "",
});

// 全选
const choseAllCheck = ref(false);
const isIndeterminate = ref(false);
const chenkChangeLists = ref<any>([]); //选择要操作的ID
const handleCheckAllChange = () => {
  if (choseAllCheck.value) {
    pager.lists.forEach((item: any) => {
      item.isCheck = true;
      chenkChangeLists.value.push(item.id);
    });
  } else {
    pager.lists.forEach((item: any) => {
      item.isCheck = false;
    });
    chenkChangeLists.value = reactive([]);
  }
  isIndeterminate.value = false;
};
//  选择单个
const handleCheckedOnceChange = (val: any) => {
  if (val.isCheck) {
    chenkChangeLists.value.push(val.id);
  } else {
    chenkChangeLists.value = chenkChangeLists.value.filter(
      (item: number | string) => {
        return item !== val.id;
      }
    );
  }
  const checkedCount = chenkChangeLists.value.length;
  choseAllCheck.value = checkedCount === pager.lists.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < pager.lists.length;
};

// 选择内容初始为空状态
const choseStart = () => {
  choseAllCheck.value = false;
  isIndeterminate.value = false;
  chenkChangeLists.value = [];
};

// 获取字典数据
const { dictData } = useDictData("activity_status,industry");

// 获取状态更改视图
const handCommand = async (val: any) => {
  // 这是修改状态的接口
  const form = reactive({
    status: val.row.dictDataItem.value,
    id: ref<any>([val.row.id]),
  });
  await apiZgActivityUpdateStatus(form);
  await getLists();
  await choseStart();
};

//搜索栏更改状态
const handCommandHeader = async (val: any) => {
  const form = reactive({
    status: val.row.value,
    id: chenkChangeLists,
  });
  await apiZgActivityUpdateStatus(form);
  await getLists();
  await choseStart();
};

//选择归属人
const BelongingPersonVisible = ref(false);
const BelongingPersonTitle = ref("");
const BelongingPersonForm = reactive({
  name: "",
});
const BelongingPersonTableChose = ref<any>([]);
const openBelongingPersonVisible = async (
  type: string,
  id: string | number
) => {
  if (type == "update") {
    BelongingPersonTitle.value = "修改活动归属人";
  } else {
    BelongingPersonTitle.value = "活动归属人";
    const res = await BelongingPersonLookparams({ id: id });
    BelongingPersonForm.name = res;
  }
  BelongingPersonVisible.value = true;
};
const BelongingPersonSubmit = async () => {};

// 弹框分页
const BelongingPersonCurrentPage = ref(1);
const BelongingPersonPageSize = ref(10);
const BelongingPersonTotal = ref("");
const tableloading = ref(false);
const BelongingPersonHandleSizeChange = async (val: number) => {
  BelongingPersonPageSize.value = val;
  await loadAll();
};
const BelongingPersonHandleCurrentChange = async (val: number) => {
  BelongingPersonCurrentPage.value = val;
  await loadAll();
};
//自动补全
interface RestaurantItem {
  account: string;
  id: string | number;
}
const restaurants = ref<RestaurantItem[]>([]);
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value;
  // call callback function to return suggestions
  cb(results);
};
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};
const loadAll = async () => {
  tableloading.value = true;
  const res = await adminList({
    account: "",
    name: "",
    role_id: "",
    page_no: BelongingPersonCurrentPage.value,
    page_size: BelongingPersonPageSize.value,
  });
  BelongingPersonTableChose.value = res.lists;
  BelongingPersonTotal.value = res.count;
  tableloading.value = false;
  const lists = res.lists.map((item: any) => {
    return {
      id: item.id,
      account: item.account,
    };
  });
  return lists;
};

const handleSelect = (item: RestaurantItem) => {};
onMounted(() => {
  restaurants.value = loadAll();
});

//   批量选择归属人
const BelongingPersonVisibleMore = ref(false);
const bulkOperation = async () => {
  BelongingPersonVisibleMore.value = true;
  //   await loadAll();
};
// 选中数据
const selectData = ref<any[]>([]);
// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({ id }) => id);
};
const BelongingPersonMoreSubmit = async () => {
  const formData = reactive({
    admin_id: selectData.value.join(","),
    id: chenkChangeLists.value.join(","),
  });
  const res = await ViewAdvancedSettingsALL(formData);
  await getLists();
  BelongingPersonVisibleMore.value = false;
};

//高级设置弹框
const advancedSettingVisible = ref(false);
const advancedSettingForm = ref({
  id: "",
  is_join: "",
  is_gaoji: "",
  is_kstd: "",
  is_gbxl: "",
  is_jyllj: "",
  is_fpyh: "",
  is_kqzl: "",
  is_zlsl: "",
  is_zlrz: "",
  zlrz_num: "",
  is_open: "",
  popularity_ratio: "",
});
const openAdvancedSettingVisible = async (val: string | number) => {
  const form = reactive({
    id: val,
  });
  advancedSettingVisible.value = true;
  const res = await ViewAdvancedSettings(form);
  advancedSettingForm.value = res;
};
const advancedSettingSubmit = async () => {
  const form = reactive({
    id: advancedSettingForm.value.id,
    is_join: advancedSettingForm.value.is_join,
    is_gaoji: advancedSettingForm.value.is_gaoji,
    is_kstd: advancedSettingForm.value.is_kstd,
    is_gbxl: advancedSettingForm.value.is_gbxl,
    is_jyllj: advancedSettingForm.value.is_jyllj,
    is_fpyh: advancedSettingForm.value.is_fpyh,
    is_kqzl: advancedSettingForm.value.is_kqzl,
    is_zlsl: advancedSettingForm.value.is_zlsl,
    is_zlrz: advancedSettingForm.value.is_zlrz,
    zlrz_num: advancedSettingForm.value.zlrz_num,
    is_open: advancedSettingForm.value.is_open,
    popularity_ratio: advancedSettingForm.value.popularity_ratio,
  });
  const res = await ViewAdvancedUpdate(form);
  await getLists();
  advancedSettingVisible.value = false;
};

//  复制链接 // 二维码
const { toClipboard } = useClipboard();

const QrCodeVisible = ref(false);
const QrCodeUrl = ref("");
const cpoyLink = async (link: string) => {
  QrCodeVisible.value = true;
  QrCodeUrl.value = link;
  return;
  try {
    await toClipboard(link);
    ElMessage.success("复制成功");
  } catch (e) {
    console.error(e);
  }
};

//  复制活动
const copyVisible = ref(false);
const copyFrom = reactive({
  id: "",
  title: "",
  is_copy_player: 0,
});
const opencopyVisible = async (id: string | number) => {
  copyVisible.value = true;
  copyFrom.id = id;
  copyFrom.title = "";
  copyFrom.is_copy_player = 0;
};

const submitCopy = async () => {
  await copyActivityLink(copyFrom);
  await getLists();
  copyVisible.value = false;
};

// 设置新链接
const updateLink = async (id: string | number) => {
  await set_new({ id });
};

//  删除
const deleteVisible = ref(false);
const deleteId = ref();
const deleteDia = async (id: string | number) => {
  deleteVisible.value = true;
  if (id) {
    deleteId.value = id;
  } else {
    deleteId.value = chenkChangeLists.value.join(",");
  }
};
const deleteSubmit = async () => {
  const form = reactive({ id: [deleteId.value] });
  await apiZgActivityDelete(form);
  await getLists();
  deleteVisible.value = false;
};
const deleteSubmitCancel = async () => {
  ElMessage("已取消删除");
  deleteVisible.value = false;
};
const pageSize2 = ref(8);
// 分页相关
const { pager, getLists, resetParams } = ActiveUsePaging({
  fetchFun: apiZgActivityLists,
  params: queryParams,
  page: appStore.activityPage,
});

const StatusIcon = ref([
  "Delete",
  "InfoFilled",
  "Ticket",
  "CircleCheck",
  "CaretRight",
  "RemoveFilled",
  "Medal",
]);
const btnColor = ref([
  "red",
  "#f4bb51",
  "#81acf3",
  "#79cb57",
  "#989bf8",
  "#63ccba",
  "#65f3ff",
]);
const handleSizeChange = (val: number) => {
  pager.size = val;
  getLists();
};
const handleCurrentChange = (val: number) => {
  appStore.setActivityPage(val);
  pager.page = val;
  getLists();
};

getLists();
</script>
<style lang="scss" scoped>
.relative {
  position: relative !important;
}
.zg_activity_data {
  height: calc(100vh - 7.5rem) !important;
  padding-bottom: 3.75rem;
}
.position {
  overflow: hidden;
  bottom: 2%;
  left: 1%;
  width: 98%;
}

.btn_style {
  color: #fff;
}

.mr_10 {
  margin-right: 10px;
}

.input_w_100 {
  width: 6.25rem;
}

.flex {
  display: flex !important;
}

.listsContainer {
  height: calc(100vh - 14rem);
  //   padding-bottom: 3.75rem;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  &::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  .each-col {
    margin-top: 0.65rem;
    border-radius: 0.02976rem;
    height: 100%;
    padding: 0.05952rem;

    .cardBD {
      .btn_top {
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;

        .left {
          align-self: center;
        }

        .right {
          align-self: center;

          .blodWorld {
            font-size: 1.25rem;
            font-weight: bold;
          }
        }
      }

      .title {
        display: flex;

        .title_info {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 2rem;
        }

        .title_info_copy {
          font-size: 1.25rem;
        }
      }

      .member_info {
        width: 100%;
        font-size: 1rem;
        div {
          width: 50%;
          p:first-child {
          }
        }
      }
    }
  }
}
// 已经结束
.end {
  background-color: rgba(170, 166, 166, 0.356);
}
// 最后一天
.lastDay {
  background-color: rgb(220, 20, 60);
}
// 还有三天
.threeDay {
  background-color: rgb(248, 201, 129);
}
.now {
  background-color: rgb(245, 249, 255);
}
.w_150 {
  width: 10rem;
}

.mt_10 {
  margin-top: 0.65rem;
}

.bg_white {
  background-color: #fff;
}

.cursor_p {
  cursor: pointer;
}

.p_5 {
  padding: 0.3125rem;
}

.red {
  color: #ff0000;
}

.font_600 {
  font-weight: 600;
}

.fz_16 {
  font-size: 1rem;
}

.fz_12 {
  font-size: 0.75rem;
}

.flex {
  display: flex !important;
}

.lex_btween {
  justify-content: space-between;
}

.blue {
  color: #409eff;
}

.text_center {
  text-align: center;
}

.pt_10 {
  padding-top: 0.625rem;
}

.pb_10 {
  padding-bottom: 0.625rem;
}
.el-card {
  border: none;
}
.btnChange {
  width: 4rem;
  height: 1.5rem;
  font-size: 0.8rem;
}
</style>
